<template>
  <div>
    <a-card :bordered="false">
    <div class="festival_setting">
      <a-button type="primary" class="addFestival" @click="addLine">添加节假日</a-button>
      <div class="festival_notice">
        <a-icon type="info-circle" style="margin-right:5px;" />节假日前一天不发送上课提醒，且当天不显示排课信息
      </div>
      <div class="table">
        <div class="table_head">
          <div class="table_title">开始日期</div>
          <div class="table_title">结束日期</div>
          <div class="table_title table_description">标注</div>
          <div class="table_title">操作</div>
        </div>
        <div class="table_body" v-for="(item,index) in form" :key="index">
          <div class="table_content">
            <span v-if="item.isShow">{{moment(item.start_time).format('YYYY-MM-DD')}}</span>
            <a-date-picker
              v-else
              format="YYYY-MM-DD"
              v-model="item.start_time"
              placeholder="请选择开始日期"
              @change="$forceUpdate()"
            />
          </div>
          <div class="table_content">
            <span v-if="item.isShow">{{moment(item.end_time).format('YYYY-MM-DD')}}</span>
            <a-date-picker
              v-else
              v-model="item.end_time"
              format="YYYY-MM-DD"
              placeholder="请选择结束日期"
              @change="$forceUpdate()"
            />
          </div>
          <div class="table_content table_description">
            <span v-if="item.isShow">{{item.tagging}}</span>
            <a-input v-else placeholder="标注信息，如：五一（最多20字）" v-model="item.tagging" @change="$forceUpdate()" :maxLength="20" />
          </div>
          <div class="table_content action">
            <a title="修改" class="action_icon" v-if="item.id&&item.isShow">
              <a-icon type="edit" @click="edit(form[index],index)" />
            </a>
            <a title="保存" class="action_icon" v-else>
              <a-icon type="save" @click="submit(form[index],index)" />
            </a>
            <a title="删除" class="action_icon">
              <a-icon type="delete" @click="del(index)" />
            </a>
          </div>
        </div>
      </div>
    </div>
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
// import {formMixin} from "@/utils/mixins/formMixin"
import { festivalList, festivalAdd, festivalEdit, festivalDel } from '@/api/ruleSetting'
export default {
  // mixins: [formMixin],
  created() {
    festivalList({ school_id: this.$store.state.user.school, pageSize: 999999 }).then(res => {
      let params = JSON.parse(JSON.stringify(res.data))
      params.forEach(val => {
        val.start_time = moment(val.start_time)
        val.end_time = moment(val.end_time)
        val.isShow = true
      })
      if(params.length>0){
        this.form = params
      }
    })
  },
  inject: ['reload'],
  data() {
    return {
      dateFormat: 'YYYY-MM-DD',
      form: [
        {
          start_time: null,
          end_time: null,
          tagging: ''
        }
      ]
    }
  },
  methods: {
    addLine() {
      this.form.push({
        start_time: null,
        end_time: null,
        tagging: ''
      })
    },
    edit(data, index) {
      data.isShow = false
      this.$forceUpdate()
    },
    del(e) {
      if (this.form[e].id) {
        //调接口删除
        festivalDel(this.form[e].id)
          .then(res => {
            this.form.splice(e, 1)
          })
          .catch(err => {
            this.$message.error(err.data.message||'删除失败')
          })
      } else {
        //本地删除
        this.form.splice(e, 1)
      }
    },
    submit(data, index) {
      if (data.id) {
        let params = JSON.parse(JSON.stringify(data))
        if (params.start_time) {
          if (params.end_time) {
            params.start_time = moment(params.start_time).format('YYYY-MM-DD')
            params.end_time = moment(params.end_time).format('YYYY-MM-DD')
            params.school_id = this.$store.state.user.school
            festivalEdit(params, params.id)
              .then(res => {
                let params = JSON.parse(JSON.stringify(res))
                params.start_time = moment(params.start_time)
                params.end_time = moment(params.end_time)
                params.isShow = true
                this.form[index] = params
                this.$forceUpdate()
              })
              .catch(err => {
                this.$message.error(err.data.message || '保存节假日信息失败')
              })
          } else {
            this.$message.error('请选择结束日期')
            return
          }
        } else {
          this.$message.error('请选择开始日期')
          return
        }
      } else {
        let params = JSON.parse(JSON.stringify(data))
        if (params.start_time) {
          if (params.end_time) {
            params.start_time = moment(params.start_time).format('YYYY-MM-DD')
            params.end_time = moment(params.end_time).format('YYYY-MM-DD')
            params.school_id = this.$store.state.user.school
            festivalAdd(params)
              .then(res => {
                let params = JSON.parse(JSON.stringify(res))
                params.start_time = moment(params.start_time)
                params.end_time = moment(params.end_time)
                params.isShow = true
                this.form[index] = params
                this.$forceUpdate()
              })
              .catch(err => {
                this.$message.error(err.data.message || '保存节假日信息失败')
              })
          } else {
            this.$message.error('请选择结束日期')
            return
          }
        } else {
          this.$message.error('请选择开始日期')
          return
        }
      }
    },
    moment
  }
}
</script>

<style lang="less" scoped>
.table {
  width: 900px;
  border: 1px solid #e8e8e8;
  .table_head {
    background: #f7f8f9;
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    .table_title {
      padding: 8px;
      justify-content: space-between;
      width: 200px;
      text-align: left;
      border-right: 1px solid #e8e8e8;
    }
    .table_title:last-child {
      border-right: none;
    }
    .table_description {
      width: 300px;
    }
  }
  .table_body {
    display: flex;
    .table_content {
      justify-content: space-between;
      width: 200px;
      padding: 8px;
      border-bottom: 1px solid #e8e8e8;
      text-align: left;
      border-right: 1px solid #e8e8e8;
    }
    .table_content:last-child {
      border-right: none;
    }
    .table_description {
      width: 300px;
    }
    .action {
      .action_icon {
        margin-right: 20px;
        vertical-align: middle;
        cursor: pointer;
      }
    }
  }
  .table_body:last-child {
    .table_content {
      border-bottom: none;
    }
  }
}
.festival_setting {
  padding: 30px;
  .addFestival {
    margin: 0 0 30px 0;
  }
  .festival_notice {
    margin-bottom: 10px;
  }
}
</style>